@charset "UTF-8";
@import "../core/core";
.pay-room {
    height: 5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    font-size: 1.6rem;
    line-height: 3rem;
    background: #fff;
    @include border-bottom($borderGrayE);
    @include display-flex();
    > p {
        @include flex(8);
        @include ellipsis();
        #pay_room {
            border:0;
        }
    }
    .edit-room  {
        display: block;
        width: 3rem;
        height: 3rem;
        font-size: 2rem;
        line-height: 3rem;
        text-align: right;
        color: $gray9;
        @include flex(3rem);
    }
}
.pay-gs-list {
    margin-bottom: 1rem;
    @include border-both($borderGrayE);
    .g-item-wrap {
        padding: 1rem;
        .g-i-count {
            span {
                color: $gray6;
            }
        }
        .g-i-info {
            color: $gray6;
        }
    }
    .reg-count {
        float: right;
        margin: 0;
        font-weight: 700;
    }
    .order-info {
        height: 4rem;
        padding: 0 1rem;
        line-height: 4rem;
        span {
            color: $red;
            font-weight: 700;
        }
    }
}
.buy-tips {
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    padding-left: 1rem;
    font-size: 1.3rem;
    line-height: 2rem;
    color: $gray9;
}
.pay-action {
    height: 4.4rem;
    bottom: 0;
    .ac-mid {
        padding: 0.5rem 0 0.5rem 1rem;
        background: #fff;
        border-top: 1px solid #e6e6e6;
        color: $gray3;
        @include flex(6);
        .cart-sum {
            display: block;
            height: 2rem;
            line-height: 2rem;
            font-size: 1.5rem;
            span {
                color: $red;
                font-weight: 700;
            }
            .wepay,
            .alipay {
                color: #333;
            }
        }
        .pay-against {
            display: block;
            height: 1.4rem;
            line-height: 1.4rem;
            font-size: 1.1rem;
            color: $gray9;
        }
    }
    .ac-right {
        font-size: 1.5rem;
        line-height: 4.4rem;
        @include flex(4);
    }

}

.pay-action2 {
    height: 4.4rem;
    bottom: 4.4rem;
    .ac-mid {
        padding: 0.5rem 0 0.5rem 1rem;
        background: #fff;
        border-top: 1px solid #e6e6e6;
        color: $gray3;
        @include flex(6);
        .cart-sum {
            display: block;
            height: 2rem;
            line-height: 2rem;
            font-size: 1.5rem;
            span {
                color: $red;
                font-weight: 700;
            }
            .wepay,
            .alipay {
                color: #333;
            }
        }
        .pay-against {
            display: block;
            height: 1.4rem;
            line-height: 1.4rem;
            font-size: 1.1rem;
            color: $gray9;
        }
    }
    .ac-right {
        font-size: 1.5rem;
        line-height: 4.4rem;
        @include flex(4);
    }

}
.service-charge {
    height: 4rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
    line-height: 4rem;
    background: #fff;
    @include border-both($borderGrayE);
    .detail{
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;

        .left{
            flex-grow: 0;
            width: 8rem;
            flex-shrink: 0;
        }
        .right{
            flex-grow: 1;
            width: 80%;
            height: 100%;
            flex-shrink: 1;
            display: flex;
            flex-direction: column;

            .right_top{
                flex-grow: 0;
                width: 100%;
                flex-shrink: 0;
                height: 45%;
                line-height: 1.8rem;
            }
            .right_bottom{
                flex-grow: 1;
                width: 100%;
                height: 55%;
                flex-shrink: 1;
                line-height: 1rem;
            }
        }
        .right_right{
            flex-grow: 0;
            width: 1rem;
            flex-shrink: 0;
        }
    }
    .span_red {
        color: $red;
    }
    .span_black {
        font-size: 1.2rem;
        color: $black;
    }
    .span_gay {
        font-size: 0.8rem;
        color: $gray6;
    }
    .user-person{
        line-height: 1.8rem;
    }
    .user-address{
        padding-top: 5px;
        line-height: 1.2rem;
    }
    #total_price {
        font-weight: 700;
    }
    .question {
        float: right;
        font-size: 2rem;
        color: #dbdbdb;
    }
    .icon-arrow1 {
        float: right;
        margin-right: 1rem;
        font-size: 1.2rem;
        vertical-align: middle;
        line-height: 4.4rem;
        color: $grayC;
    }
}
.own-pay,
.thd-party-pay {
    margin-bottom: 1rem;
    background: #fff;
    border-top: 1px solid $borderGrayE;
}
.pay-item {
    position: relative;
    height: 6rem;
    padding: 0 1rem;
    font-size: 1.5rem;
    line-height: 6rem;
    @include border-bottom($borderGrayE);
    .chk-wrap {
        top: 2rem;
        right: 1rem;
        width: 2rem;
        height: 2rem;
        padding: 0;
    }
    .pay-icon-bg {
        display: inline-block;
        width: 4rem;
        height: 4rem;
        margin-right: 0.4rem;
        font-size: 3.6rem;
        line-height: 4rem;
        text-align: center;
        color: #fff;
        background: #f9c851;
        vertical-align: middle;
        border-radius: 0.6rem;
        overflow: hidden;
        &.wepay {
            background: #36b338;
            font-size: 2.8rem;
            line-height: 4rem;
        }
        &.alipay {
            background: #0da4ff;
            font-size: 2.8rem;
            line-height: 4rem;
        }
    }
}
/*购买成功页面*/
.suc-area {
    margin-bottom: 1rem;
    padding: 1rem;
    text-align: center;
    background: #fff;
    @include border-bottom($borderGrayE);
    .suc-top {
        padding: 0.8rem;
        font-size: 2rem;
        line-height: 3rem;
        color: #73ca9c;
        .iconfont {
            font-size: 3rem;
            vertical-align: middle;
        }
    }
    .suc-tips {
        font-size: 1.1rem;
        color: $gray9;
    }
    .hotel-tel {
        color: $gray9;
        text-decoration: underline;
    }
}
.order-info {
    @include display-flex();
    .open-door,
    .order-room {
        @include flex(5);
        @include ellipsis();
    }
    .order-other,
    .prs-bar {
        line-height: 4rem;
        text-align: right;
        color: $gray6;
        @include flex(5);
        .prss-wrap {
            width: 100%;
            height: 0.4rem;
            margin: 1.8rem 0;
            background: #ebebeb;
            border-radius: 0.2rem;
            overflow: hidden;
            .progress {
                width: 0;
                height: 0.4rem;
                background: #30baff;
                border-radius: 0.2rem;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -ms-transition: all 0.3s;
                -o-transition: all 0.3s;
                transition: all 0.3s;
            }
        }
    }
    .prs-bar {
        color: #30baff;
    }
}
.suc-btn-group {
    height: 3.8rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
    line-height: 3.8rem;
    text-align: center;
    @include clearfix();
    a {
        display: block;
        float: left;
        width: 48%;
        margin: 0 1%;
        padding: 0 3rem;
        border: 1px solid $borderGrayE;
        color: $red;
        height: 3.8rem;
        font-size: 1.5rem;
        line-height: 3.8rem;
        text-align: center;
        border-radius: 0.4rem;
        background: #fff;
        &.go-home {
            background: $red;
            color: #fff;
        }
    }
    .suc-single-btn {
        width: 100%;
    }
}
